<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="冯予">
    <meta name="keywords" content="个人作品集、个人网站、交互作品、设计师网站">
    <title>个人网站</title>
</head>
<style>
    body {
        text-align: center;
        background-image: url(网页1.jpeg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        margin: 0%;
        padding: 0%;
    }
    
    h3 {
        color: rgb(223, 137, 183);
        font-size: 18px;
        position: fixed;
        top: 0px;
        left: 30px;
        z-index: 1;
    }
    
    h4 {
        color: rgb(223, 137, 183);
        font-size: 22px;
        position: relative;
        top: 10px;
        margin: auto;
        z-index: 1;
    }
    
    h5 {
        color: rgb(223, 137, 183);
        font-size: 18px;
        position: fixed;
        top: -10px;
        left: 1110px;
        z-index: 1;
    }
    
    .frist {
        height: 300px;
        width: 1050px;
        background-color: transparent;
        position: relative;
        top: -30px;
        text-align: left;
        margin: auto;
        padding-left: 150px;
        padding-top: 200px;
    }
    
    .di1 {
        position: absolute;
        top: 220px;
        left: 885px;
    }
    
    .di1 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di1 img:hover {
        transform: scale(1.8)
    }
    
    @keyframes dong {
        0% {
            opacity: 0.8;
            transform: translate(0, 0);
        }
        50% {
            opacity: 1;
            transform: translate(0px, -5px);
        }
        100% {
            opacity: 0.8;
            transform: translate(0, 0);
        }
    }
    
    .di1dong {
        position: absolute;
        bottom: -60px;
        left: 560px;
        animation: move 3s linear 1.5s infinite normal;
    }
    
    h1 {
        color: rgb(223, 32, 182);
        font-size: 36px;
    }
    
    .frist h1 {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .frist h1:hover {
        transform: scale(0.9)
    }
    
    p1 {
        color: rgb(221, 137, 183);
        font-size: 24px;
    }
    
    .second {
        height: 125px;
        width: 900px;
        background-color: transparent;
        position: relative;
        top: 50px;
        text-align: left;
        margin: auto;
        padding-left: 150px;
        padding-top: 200px;
    }
    
    .di2 {
        position: absolute;
        top: 30px;
        left: 20px;
    }
    
    .di3 {
        position: absolute;
        top: 240px;
        left: 20px;
        transition: all 3s;
    }
    
    .di3 :hover {
        transform: translateX(20px);
    }
    
    .di4 {
        position: absolute;
        top: 240px;
        left: 140px;
        transition: all 3s;
    }
    
    .di4 :hover {
        transform: translateX(20px);
    }
    
    .di5 {
        position: absolute;
        top: 240px;
        left: 260px;
        transition: all 3s;
    }
    
    .di5 :hover {
        transform: translateX(20px);
    }
    
    .di6 {
        position: absolute;
        top: 240px;
        left: 390px;
        transition: all 3s;
    }
    
    .di6 :hover {
        transform: translateX(20px);
    }
    
    .di16 {
        position: absolute;
        top: 30px;
        left: 740px;
        z-index: 3;
    }
    
    h2 {
        color: white;
        font-size: 18px;
        position: relative;
        top: -230px;
        left: -200px;
        z-index: 1;
    }
    
    p {
        color: white;
        font-size: 20px;
        position: relative;
        top: -220px;
        left: 50px;
        z-index: 2;
    }
    
    p2 {
        color: white;
        font-size: 20px;
        position: relative;
        top: -210px;
        left: -130px;
        z-index: 2;
    }
    
    .thrid {
        height: 550px;
        width: 1050px;
        background-color: transparent;
        position: relative;
        top: 40px;
        text-align: left;
        margin: auto;
        padding-left: 150px;
        padding-top: 200px;
    }
    
    h6 {
        color: white;
        font-size: 18px;
        position: absolute;
        top: -20px;
        left: 20px;
        z-index: 3;
    }
    
    .di7 {
        position: absolute;
        top: 80px;
        left: 95px;
    }
    
    .di7 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di7 img:hover {
        transform: scale(0.8)
    }
    
    .di8 {
        position: absolute;
        top: 420px;
        left: 95px;
    }
    
    .di8 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di8 img:hover {
        transform: scale(0.8)
    }
    
    .di14 {
        position: absolute;
        top: 80px;
        left: 610px;
    }
    
    .di14 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di14 img:hover {
        transform: scale(0.8)
    }
    
    .di15 {
        position: absolute;
        top: 420px;
        left: 610px;
    }
    
    .di15 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di15 img:hover {
        transform: scale(0.8)
    }
    
    .four {
        height: 600px;
        width: 1050px;
        background-color: transparent;
        position: relative;
        top: 70px;
        text-align: left;
        margin: auto;
        padding-left: 150px;
        padding-top: 0px;
    }
    
    @keyframes move {
        0% {
            opacity: 0.8;
            transform: translate(0, 0);
        }
        50% {
            opacity: 1;
            transform: translate(15px, 35px);
        }
        100% {
            opacity: 0.8;
            transform: translate(0, 0);
        }
    }
    
    .di9move {
        position: absolute;
        top: 0px;
        left: 95px;
        animation: move 6s linear 1.5s infinite normal;
    }
    
    @keyframes icon {
        0% {
            opacity: 0.8;
            transform: translate(0, 0);
        }
        50% {
            opacity: 1;
            transform: translate(-15px, -35px);
        }
        100% {
            opacity: 0.8;
            transform: translate(0, 0);
        }
    }
    
    .siteicon {
        position: absolute;
        top: 280px;
        left: 610px;
        animation: icon 6s linear 1.5s infinite;
    }
    
    .five {
        height: 600px;
        width: 1050px;
        background-color: transparent;
        position: relative;
        top: 20px;
        text-align: left;
        margin: auto;
        padding-left: 150px;
        padding-top: 20px;
    }
    
    h7 {
        color: white;
        font-size: 22px;
        position: absolute;
        top: 60px;
        left: 530px;
        z-index: 3;
    }
    
    p3 {
        color: white;
        font-size: 17px;
        position: absolute;
        top: 100px;
        left: 460px;
        z-index: 3;
    }
    
    p4 {
        color: white;
        font-size: 17px;
        position: absolute;
        top: 130px;
        left: 380px;
        z-index: 3;
    }
    
    p5 {
        color: white;
        font-size: 17px;
        position: absolute;
        top: 160px;
        left: 330px;
        z-index: 3;
    }
    
    .di11 {
        position: absolute;
        top: 200px;
        left: 100px;
    }
    
    .di11 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di11 img:hover {
        transform: scale(0.9)
    }
    
    .di12 {
        position: absolute;
        top: 200px;
        left: 435px;
    }
    
    .di12 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di12 img:hover {
        transform: scale(0.9)
    }
    
    .di13 {
        position: absolute;
        top: 200px;
        left: 770px;
    }
    
    .di13 img {
        cursor: pointer;
        transition: all 0.6s;
    }
    
    .di13 img:hover {
        transform: scale(0.9)
    }
    
    .six {
        height: 180px;
        width: 1050px;
        background-color: transparent;
        position: relative;
        top: 40px;
        text-align: left;
        margin: auto;
        padding-left: 150px;
        padding-top: 20px;
    }
    
    h8 {
        color: white;
        font-size: 22px;
        position: absolute;
        top: 35px;
        left: 530px;
        z-index: 3;
    }
    
    p6 {
        color: white;
        font-size: 18px;
        position: absolute;
        top: 150px;
        left: 370px;
        z-index: 3;
    }
    
    .text1 {
        color: white;
        font-size: 18px;
        position: absolute;
        top: 8px;
        z-index: 3;
        display: inline-block;
        margin: 100px auto;
    }
    
    span {
        padding-right: 40px;
    }
</style>




<body>
    <!-- <a href="#3">个人介绍</a>
    <a href="#5">个人作品</a> -->
    <h3>个人介绍</h3>
    <h4>FY-impression</h4>
    <h5>个人作品</h5>
    <div class="frist">
        <div class="di1"> <img src="网页2.png" width="120"> </div>
        <div class="di1dong"> <img src="网页17.png" width="50"> </div>
        <h1>FY-impression</h1>
        <p1>个人网页</p1>
    </div>
    <div class="second">
        <h2>个人介绍</h2>
        <p>姓名：冯予<br>性别：女<br>职业：学生
            <br>学校：成都东软学院<br>介绍：大家好！我是来自成都的一个乐观开朗的女孩。 </p>
        <p2>爱好与技能：</p2>
        <div class="di2"><img src="网页3.jpg" width="150">
        </div>
        <div class="di3"><img src="网页5.png" width="80"></div>
        <div class="di4"><img src="网页6.png" width="80"></div>
        <div class="di5"><img src="网页4.png" width="85"></div>
        <div class="di6"><img src="网页7.jpg" width="85"></div>
        <div class="di16"><img src="网页16.gif" width="280"></div>
    </div>
    <div class="thrid">
        <h6>个人作品</h6>
        <div class="di7"><img src="网页8.png" width="480"></div>
        <div class="di14"><img src="网页8-2.png" width="480"></div>
        <div class="di8"><img src="网页9.png" width="480">
        </div>
        <div class="di15"><img src="网页10.png" width="480"></div>

    </div>
    <div class="four">
        <div class="di9move"><img src="网页11.png" width="410"></div>
        <div class="siteicon"><img src="网页12.png" width="410">

        </div>
    </div>
    <div class="five">
        <h7>海报设计</h7>
        <p3>关于超市、疫情、书籍的海报设计。</p3>
        <p4>在我看来生活是创意的来源，创意源于文化，创意源于自己。</p4>
        <p5>创意是一种感觉、一种心态，是一种体验、是一种愉悦、舒适的生活方式。</p5>
        <div class="di12"><img src="网页13.png" width="300"></div>
        <div class="di11"><img src="网页14.png" width="295"></div>
        <div class="di13"><img src="网页15.png" width="295"></div>
    </div>
    <div class="six">

        <h8>CONTACT</h8>
        <div class="text1">
            <span>QQ：2693861922</span>&nbsp;
            <span>电话：13540810114</span>&nbsp;
            <span>微信号：wxid_3c9dij72yifu22</span>&nbsp;
            <span>微博：@小事巧了记2108</span>&nbsp;</div>
        <p6>
            <hr> Copyright 2020 All Rights Reserved @Feng Yu
        </p6>
    </div>
</body>


</html>